<div class="one-notbreadcrumb one-map-container one-map-peach-container">
  <!--<div class="one-peach-site-toggle-large" (click)="unfoldSiteDetail($event)" style="display: none;"></div>-->
  <div class="one-peach-site-detail">
    <div class="one-peach-site-header">
      <div class="one-peach-site-name">
        <span class="">郑州</span>
        <span class="one-peach-site-toggle" (click)="shrinkSiteDetail($event)"></span>
      </div>
      <!--各个站点占比-->
      <div class="one-peach-count-chart">
        <div id="one-peach-count-chart" style="width: 200px;height: 200px;margin: 0 auto"></div>
      </div>
    </div>
    <!--车辆信息-->
    <div class="one-peach-ranking" style="top: 260px;">
      <div class="one-peach-ranking-border"></div>
      <div class="one-peach-ranking-body">
        <div class="one-peach-ranking-btn">
          <button class="btn active" [class.active]="trackType=='real'" (click)="trackTypeClick('real',$event)">实时监测</button>
          <button class="btn" [class.active]="trackType=='history'" (click)="trackTypeClick('history',$event)">历史轨迹</button>
        </div>
        <div class="one-peach-list-car">
          <div class="fa fa-angle-double-left" style="font-size: 24px;cursor: pointer;" (click)="shrinkCarList($event)"></div>
          <div class="one-peach-track-date one-hide">
            <input class="form-control" type="text" id="pathDate"/>
          </div>
          <ul class="one-peach-list-car-head">
            <li class="">
              <ul class="list-inline">
                <li>车牌号码</li>
                <li [class.small]="trackType=='history'">车辆类型</li>
                <li *ngIf="trackType!='history'">车辆状态</li>
                <li *ngIf="trackType!='history'">行驶状态</li>
                <li class="large">所属单位</li>
                <li *ngIf="trackType!='history'">报警信息</li>
              </ul>
            </li>
          </ul>
          <ul class="one-peach-list-car-body">
            <li *ngFor="let carDetail of carRealInfo;index as i;">
              <ul class="list-inline" *ngIf="i<=loadDataIndex*loadDataNumber">
                <li>
                  <label *ngIf="trackType=='history'">
                    <input type="checkbox" class="one-hide" name="carName">
                    <span class="one-check-box-blue" (click)="historyDataClick(carDetail,$event)" [style.color] = "carDetail.siteStatus != '1111' && '#aaa4a4'">{{carDetail.deviceName}}</span>
                  </label>
                  <span *ngIf="trackType=='history'" class="fa fa-play" [id] = "carDetail.deviceCode" style="margin-left: 5px;" (click)="trackSportClick($event,carDetail)" [style.color] = "carDetail.siteStatus != '1111' && '#aaa4a4'"></span>
                  <span  *ngIf="trackType=='real'" (click)="carRealListList(carDetail)">{{carDetail.deviceName}}</span>
                </li>
                <li [class.small]="trackType=='history'">{{carDetail.deviceType}}</li>
                <li *ngIf="trackType!='history'">{{carDetail.deviceStatus}}</li>
                <li *ngIf="trackType!='history'">{{carDetail.runStatus}}</li>
                <li class="large">{{carDetail.companyName}}</li>
                <li *ngIf="trackType!='history'">{{carDetail.alarmStatus}}</li>
              </ul>
            </li>
          </ul>
          <ul class="one-peach-list-car-footer" *ngIf="!carRealInfo.length">
            {{nullCarDataContent}}
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!--搜索及各种工具-->
  <div class="one-peach-detail">
    <!--搜索-->
    <div class="one-peach-search one-peach-dropdown mapSearch" (mouseleave)="dropDownHide($event)">
      <input type="text" class="form-control" placeholder="请输入要查询的车辆车牌号" [(ngModel)] = "carSearchCode" (ngModelChange)="getCarSearchData(searchCode)" (click)="siteNameFocus($event)"  (keydown)="keyUpOrDown($event)" #searchCode>
      <p class="one-peach-triangle" style="top: 19px;z-index: 11;display: none;"></p>
      <ul class="one-peach-dropdown-menu">
        <li *ngFor="let carSearch of carSearchArr;index as i" [class.active]="activeSiteCode == carSearch.deviceCode" (click)="selectSearchSite(carSearch)">
          <label>
            <span class="one-radio-text">{{carSearch.deviceName}}</span>
          </label>
        </li>
      </ul>
    </div>
    <!--工具-->
    <div class="one-peach-dropdown-container">
      <ul class="one-peach-dropdown">
        <li class="one-drop" (mouseleave)="dropDownHide($event)">
          <span (click)="dropDownClick($event)">区域</span>
          <p class="one-peach-triangle" style="top: 20px;z-index: 11;left: 15px;display: none;"></p>
          <div class = "one-peach-dropdown-menu" style="width: 170px;padding: 0;left: 0;">
            <ul class=" ztree" id="carRegionTree" style="margin: 0;max-height: 300px;overflow: auto;">
              <!--<li *ngFor="let region of regionDataArr;index as i;">-->
              <!--<label>-->
              <!--<input type="radio" class="one-hide" name="carArea" [checked]="i == 0">-->
              <!--<span class="one-radio-text one-radio-blue" (click)="carRegionClick(region.id)">{{region.name}}</span>-->
              <!--</label>-->
              <!--</li>-->
            </ul>
          </div>
        </li>
        <li class="one-drop"  (mouseleave)="dropDownHide($event)">
          <span (click)="dropDownClick($event)">车辆类型</span>
          <p class="one-peach-triangle" style="top: 19px;z-index: 11;display: none;"></p>
          <ul class="one-peach-dropdown-menu">
            <li *ngFor="let carType of carTypeArr;index as i">
              <label>
                <input type="radio" class="one-hide" name="carType" [checked]="i==0" >
                <span class="one-radio-text one-radio-blue" (click)="carTypeClick(carType.deviceCode)">{{carType.deviceType}}</span>
              </label>
            </li>
          </ul>
        </li>
        <li class="one-drop"  (mouseleave)="dropDownHide($event)">
          <span (click)="dropDownClick($event)">车辆状态</span>
          <p class="one-peach-triangle" style="top: 19px;z-index: 11;display: none;"></p>
          <ul class="one-peach-dropdown-menu">
            <li *ngFor="let carStatus of carStatusArr;index as i">
              <label>
                <input type="radio" class="one-hide" name="carStatus" [checked]="i==0" >
                <span class="one-radio-text one-radio-blue" (click)  ="carStatusClick(carStatus.statusCode)">{{carStatus.carStatus}}</span>
              </label>
            </li>
          </ul>
        </li>
        <li [class.active]="isTraffic" style="padding: 0;">
          <span (click)="trafficBtnClick()" style="padding: 5px 0;">路况</span>
          <span class="fa fa-refresh" style="position: absolute;right: 8px;width: 12px;line-height: 32px;" (click)="refreshTraffic()" title="刷新"></span>
        </li>
      </ul>
    </div>
  </div>
  <!-- 热力图时间线 -->
  <div class="one-heatMap-container one-hide" style="bottom: 60px;z-index: 100;">
    <ul class="one-time-line">
      <li class="one-time-play" (click)="playOrPauseHotInterval(intervalStrart)" #intervalStrart>
        <i class="fa fa-play"></i>
      </li>
      <li class="one-time-item" *ngFor="let date of dateArray;index as i;" [class.active] = "selectDate == date"
          [title]="date" (click)="clickHotTimeLine(date,dateLine)" #dateLine></li>
    </ul>
  </div>
  <!-- 地图容器-->
  <div id="realTimeMap" class="one-map-container one-map-peach-container"></div>
  <!--地图自定义控制器-->
  <div class="one-site-control" *ngIf="isNormalMap">
    <!--框选-->
   <div class="one-peach-region" (click)="regionAreaClick()" *ngIf="trackType=='history'">框选</div>
    <!--缩放-->
    <ul class="one-map-zoom">
      <li (click)="zoomIn()">+</li>
      <li (click)="zoomOut()">-</li>
    </ul>
  </div>
  <!-- 正在加载 -->
  <div class="one-data-loadState-nomodal" *ngIf="isLoading" style="display: block;"></div>
</div>
